<template>
  <view class="shop-page">
    <!-- 顶部背景 -->
    <view class="shop-header">
      <image class="header-bg" src="/static/Images/shop/Toubu.png" mode="widthFix"></image>
      <view class="header-content">
        <view class="back-btn" @click="navigateBack">
          <image class="back-icon" src="/static/Images/shop/Fanhui.png" mode="aspectFit"></image>
        </view>
        <view class="title">分销商品管理</view>
      </view>
    </view>
    
    <!-- 数据概览卡片 -->
    <view class="shop-card">
      <view class="card-item">
        <view class="card-label">支付金额(元)</view>
        <view class="card-value">2689.56</view>
      </view>
      <view class="card-divider"></view>
      <view class="card-item">
        <view class="card-label">分销订单数量</view>
        <view class="card-value">65</view>
      </view>
    </view>
    
    <!-- 商品状态标签 -->
    <view class="status-tabs">
      <view class="tab" :class="{active: activeTab === 'selling'}" @click="switchTab('selling')" :style="activeTab === 'selling' ? { '--tab-bg': `url(${backgroundImages.tabIndicator})` } : {}">销售中</view>
      <view class="tab" :class="{active: activeTab === 'soldout'}" @click="switchTab('soldout')" :style="activeTab === 'soldout' ? { '--tab-bg': `url(${backgroundImages.tabIndicator})` } : {}">已下架</view>
    </view>
    
    <!-- 商品列表 -->
    <view class="goods-list">
      <!-- 商品项 -->
      <view class="goods-item" v-for="(item, index) in goodsList" :key="index">
        <view class="goods-layout">
          <!-- 商品缩略图 -->
          <view class="goods-thumb">
            <image class="thumb-image" src="/static/Images/shop/Banhu.png" mode="aspectFill"></image>
          </view>
          
          <!-- 商品信息容器 -->
          <view class="goods-container">
            <view class="goods-info">
              <view class="goods-title">商品名称话费商品名称话费商品</view>
              <view class="goods-sales">累计销量：{{ item.sales }}</view>
              <view class="goods-type">类型：{{ item.type }}</view>
              <!-- 显示商品标签 -->
              <view class="goods-tags" v-if="item.tags && item.tags.length > 0">
                <view class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{ tag }}</view>
              </view>
            </view>
            
            <view class="goods-price">
              <view class="price">¥{{ item.price }}</view>
              <view class="goods-actions">
                <!-- 销售中商品的操作按钮 -->
                <template v-if="activeTab === 'selling'">
                  <button class="action-btn soldout-btn" @click="handleSoldout(item)">下架</button>
                  <button class="action-btn share-btn" @click="handleShare(item)">分享</button>
                </template>
                <!-- 已下架商品的操作按钮 -->
                <template v-else>
                  <button class="action-btn publish-btn" @click="openTagSelector(item)">上架</button>
                  <button class="action-btn delete-btn" @click="handleDelete(item)">删除</button>
                </template>
              </view>
            </view>
          </view>
        </view>
        
        <view class="goods-commission">
          <view class="commission-item">
            <view class="commission-label">价格：</view>
            <view class="commission-price">¥{{ item.originalPrice }}</view>
          </view>
          <view class="commission-item">
            <view class="commission-label">按比率：</view>
            <view class="commission-rate">{{ item.commissionRate }}%</view>
          </view>
          <view class="commission-item">
            <view class="commission-label">佣金：</view>
            <view class="commission-value">¥{{ item.commission }}</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部指示器 -->
    <view class="bottom-indicator"></view>
    
    <!-- 标签选择器弹窗 -->
    <TagSelector 
      v-model:visible="tagSelectorVisible" 
      :initialTags="selectedTags" 
      @confirm="handleTagsConfirm"
    />
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import TagSelector from '../../components/TagSelector.vue';
import { getImageUrl } from '@/config/api';

// 当前激活的标签
const activeTab = ref('selling');

// 切换标签
const switchTab = (tab) => {
  activeTab.value = tab;
};

// 标签选择器相关
const tagSelectorVisible = ref(false);
const selectedTags = ref([]);
const currentItem = ref(null);

// 打开标签选择器
const openTagSelector = (item) => {
  currentItem.value = item;
  selectedTags.value = item.tags || [];
  tagSelectorVisible.value = true;
};

// 处理标签确认
const handleTagsConfirm = (tags) => {
  if (currentItem.value) {
    // 更新商品标签
    currentItem.value.tags = tags;
    
    // 如果是从已下架列表选择标签，则自动上架商品
    if (activeTab.value === 'soldout') {
      handlePublish(currentItem.value);
    } else {
      // 显示成功提示
      uni.showToast({
        title: '标签设置成功',
        icon: 'success'
      });
    }
  }
};

// 返回上一页
const navigateBack = () => {
  uni.navigateBack();
};

// 模拟销售中商品数据
const sellingGoods = ref([
  {
    title: '商品名称话费商品名称话费商品',
    sales: 1,
    type: '充值类-话费',
    price: 60,
    originalPrice: 9.99,
    commissionRate: 15.00,
    commission: 15.80,
    tags: ['热门', '店长推荐']
  },
  {
    title: '商品名称话费商品名称话费商品',
    sales: 1,
    type: '充值类-话费',
    price: 60,
    originalPrice: 9.99,
    commissionRate: 15.00,
    commission: 15.80,
    tags: ['新品促销']
  },
  {
    title: '商品名称话费商品名称话费商品',
    sales: 1,
    type: '充值类-话费',
    price: 60,
    originalPrice: 9.99,
    commissionRate: 15.00,
    commission: 15.80,
    tags: []
  }
]);

// 模拟已下架商品数据
const soldoutGoods = ref([
  {
    title: '已下架商品示例',
    sales: 0,
    type: '充值类-话费',
    price: 50,
    originalPrice: 8.99,
    commissionRate: 10.00,
    commission: 10.50,
    tags: []
  }
]);

// 根据当前标签返回对应的商品列表
const goodsList = computed(() => {
  return activeTab.value === 'selling' ? sellingGoods.value : soldoutGoods.value;
});

// 处理下架
const handleSoldout = (item) => {
  // 从销售中列表移除
  const index = sellingGoods.value.findIndex(good => good === item);
  if (index > -1) {
    sellingGoods.value.splice(index, 1);
    // 添加到已下架列表
    soldoutGoods.value.push(item);
    
    uni.showToast({
      title: '商品已下架',
      icon: 'success'
    });
  }
};

// 处理分享
const handleShare = (item) => {
  uni.showToast({
    title: '分享功能开发中',
    icon: 'none'
  });
};

// 处理上架
const handlePublish = (item) => {
  // 从已下架列表移除
  const index = soldoutGoods.value.findIndex(good => good === item);
  if (index > -1) {
    soldoutGoods.value.splice(index, 1);
    // 添加到销售中列表
    sellingGoods.value.push(item);
    
    uni.showToast({
      title: '商品已上架',
      icon: 'success'
    });
  }
};

// 处理删除
const handleDelete = (item) => {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除该商品吗？',
    success: (res) => {
      if (res.confirm) {
        // 从已下架列表移除
        const index = soldoutGoods.value.findIndex(good => good === item);
        if (index > -1) {
          soldoutGoods.value.splice(index, 1);
          
          uni.showToast({
            title: '商品已删除',
            icon: 'success'
          });
        }
      }
    }
  });
};

// 背景图片计算属性
const backgroundImages = computed(() => ({
  tabIndicator: getImageUrl('/static/Images/shop/Banhu.png')
}));
</script>

<style lang="scss">
.shop-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
}

/* 顶部背景 */
.shop-header {
  position: relative;
  width: 100%;
  height: 200rpx;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.header-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 80rpx;
  width: 100%;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 30rpx;
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}

.title {
  color: #fff;
  font-size: 36rpx;
  font-weight: 500;
  text-align: center;
}

/* 数据概览卡片 */
.shop-card {
  border-radius: 20rpx;
  padding: 30rpx;
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2.1rem;
}

.card-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-divider {
  width: 2rpx;
  height: 80rpx;
  background-color: #eee;
}

.card-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.card-value {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
}

/* 商品状态标签 */
.status-tabs {
  display: flex;
  background-color: #fff;
  padding: 20rpx 30rpx;
  margin-top: 30rpx;
  position: relative;
  margin-top: 3.3rem;
}

.tab {
  font-size: 30rpx;
  color: #666;
  margin-right: 40rpx;
  position: relative;
  padding-bottom: 10rpx;
}

.tab.active {
  color: #222;
  font-weight: 500;
}

.tab.active::after {
  content: '';
  position: absolute;
  width: 30rpx;
  height: 30rpx;
  background-image: var(--tab-bg);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  border-radius: 2rpx;
  margin-top: 0.6rem;
  margin-left: -0.75rem;
}

/* 商品列表 */
.goods-list {
  background-color: #fff;
  padding: 0 30rpx;
  margin-top: 2rpx;
}

.goods-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
}

/* 商品布局 */
.goods-layout {
  display: flex;
  align-items: flex-start;
}

/* 商品缩略图 */
.goods-thumb {
  width: 160rpx;
  height: 160rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
  border-radius: 8rpx;
  overflow: hidden;
}

.thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 商品信息容器 */
.goods-container {
  flex: 1;
  overflow: hidden;
}

.goods-info {
  margin-bottom: 20rpx;
}

.goods-title {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 10rpx;
  font-weight: 500;
}

.goods-sales, .goods-type {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 6rpx;
}

.goods-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.price {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.goods-actions {
  display: flex;
}

.action-btn {
  margin-left: 20rpx;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 30rpx;
  font-size: 26rpx;
  border-radius: 30rpx;
}

.soldout-btn {
  background-color: #f5f5f5;
  color: #666;
  border: 1rpx solid #ddd;
}

.share-btn {
  background-color: #ff4d4f;
  color: #fff;
}

.publish-btn {
  background-color: #52c41a;
  color: #fff;
}

.delete-btn {
  background-color: #ff7875;
  color: #fff;
}

.goods-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10rpx;
}

.tag {
  font-size: 20rpx;
  color: #ff4d4f;
  background-color: #fff0f0;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  margin-right: 10rpx;
  margin-bottom: 6rpx;
  border: 1rpx solid #ffccc7;
}

.goods-commission {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 26rpx;
  width: 100%;
}

.commission-item {
  display: flex;
  align-items: center;
  width: 33%;
  margin-bottom: 10rpx;
}

.commission-label {
  color: #999;
  margin-right: 10rpx;
  width: 50%;
}

.commission-price {
  color: #ff4d4f;
  width: 50%;
}

.commission-rate {
  color: #333;
  width: 50%;
}

.commission-value {
  color: #ff4d4f;
  font-weight: 500;
  width: 50%;
}

/* 底部指示器 */
.bottom-indicator {
  width: 120rpx;
  height: 8rpx;
  background-color: #ddd;
  border-radius: 4rpx;
  margin: 30rpx auto;
}
</style>